/**
 * @description 在线留言
 */

import { Button, Form, Input } from 'antd';

import { pattern_map } from "@/components/FormItem/getRule";
import AbIcon from "@/components/DecorateIcons/Ab_Icon";

function OnlineMessage({ home }) {

  const [form] = Form.useForm()

  return (
    <div className={`message animate__animated animate__${home.base.message_animate}`}>

      {/* 标题 */}
      <div className="title">
        <span className="text">{home.base.message_title}</span>
        <span className="subtext">{home.base.message_subtitle}</span>
      </div >

      {/* 图片 */}
      <div className="img-box">
        <img className='img' src={home.base.message_img} />
      </div>

      {/* 内容盒子 */}
      <div className='content'>

        {/* 信息 */}
        <div className='info'>
          <div className='desc1'>{home.base.message_desc1}</div>
          <div className='desc2'>{home.base.message_desc2}</div>
          <div className='phone'>
            <span className='text'>{home.base.message_mobile}</span>
            <AbIcon className='icon' iconName={home.base.message_mobile_icon} />
          </div>
        </div>

        {/* 表单 */}
        <Form
          name="onmessage"
          form={form}
          className="message-form"
          autoComplete="off"
          spellCheck="false"
        >


          <Form.Item
            className='name-item'
            name="name"
            rules={[
              {
                required: true,
                message: '请输入姓名',
              },
            ]}
          >
            <Input placeholder="请输入姓名" allowClear />

          </Form.Item>


          <Form.Item
            className='email-item'
            name="email"
            rules={[
              {
                required: true,
                message: '请输入邮箱',
              },
              {
                pattern: pattern_map['邮'],
                message: '请输入正确的邮箱'
              }
            ]}
          >
            <Input placeholder="请输入邮箱" allowClear />
          </Form.Item>

          <Form.Item
            className='mobile-item'
            name="mobile"
            rules={[
              {
                required: true,
                message: '请输入手机',
              },
              {
                pattern: pattern_map['手'],
                message: '请输入正确的手机号码'
              }
            ]}
          >
            <Input placeholder="请输入手机" allowClear />
          </Form.Item>

          <Form.Item
            className='content-item'
            name="content"
            rules={[
              {
                required: true,
                message: '请输入留言',
              },
            ]}
          >
            <Input.TextArea placeholder="请输入留言" rows={4} />
          </Form.Item>


          <div className='btn-box'>
            <Button className='btn' type="primary" htmlType="submit">{home.base.message_btn}</Button>
          </div>

        </Form>
      </div >
    </div >
  )
}

export default OnlineMessage